<template>
  <view class="searCh">
    <!-- 搜索框 -->
    <view class="sear"><uni-search-bar @input="input" @confirm="myConfirm" :radius="100" cancelButton="none"></uni-search-bar></view>
    <!-- 搜索联想 -->
    <view v-if="searchList.length > 0">
      <view class="searchInfo" v-for="item in searchList" :key="item.goods_id" @click="gotoGoods(item.goods_id)">
        <view class="info">{{ item.goods_name }}</view>
        <uni-icons type="forward" size="20" class="icon"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history" v-else>
      <view class="top">
        <view class="word">搜索历史</view>
        <uni-icons @click="clearList" type="trash-filled" size="20"></uni-icons>
      </view>
      <view class="item">
        <view class="hisitem" @click="toGoodsList(item)" v-for="(item, index) in historyList" :key="index">{{ item }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timer: null, //计时器
      key: '', //搜索的关键字
      searchList: [], //保存联想数据
      historyList: uni.getStorageSync('hist') || [] //搜索历史
    };
  },
  methods: {
    // 点击历史记录跳转到商品详情数据
    toGoodsList(item){
      uni.navigateTo({
        url:`/pages/goods_detail/main?query=${item}`
      })
    },
    // 清空历史数据
    clearList(){
      uni.removeStorageSync('hist')
      this.historyList=[]
      uni.showToast({
        title:'删除成功',
        icon:'success'
      })
    },
    // 回车事件
    myConfirm(e) {
      // 将搜索的数据保存起来
      this.historyList.unshift(e.value);
      // 去除重复的项
      const mySet = new Set(this.historyList);
      this.historyList = [...mySet];
      // 将搜索的历史记录保存到本地存储
      uni.setStorageSync('hist', this.historyList);
      // 点击回车跳转到商品列表页面
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?query=${e.value}`
      });
    },
    // 输入事件
    input(e) {
      console.log(e);
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.key = e;
        this.getSearchList();
      }, 500);
    },
    // 发请求获取联想数据
    async getSearchList() {
      if (this.key === '') {
        return uni.$showMsg('搜索内容不能为空');
      }
      const { data: res } = await uni.$http.get('/api/public/v1/goods/search', {
        query: this.key
      });
      console.log(res);
      if (res.meta.status !== 200) return uni.$showMsg();
      this.searchList = res.message.goods;
    },
    //跳转到商品详情
    gotoGoods(id) {
      uni.navigateTo({
        url: `/pages/goods_detail/main?goods_id=${id}`
      });
    }
  }
};
</script>

<style lang="scss">
.sear {
  background-color: #c00000;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.searchInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
.info {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;

  line-height: 40px;
}
.icon {
  flex: 1;
}
.history {
  .top {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }

  .item {
    display: flex;
    .hisitem {
      background-color: #eee;
      margin: 10px;
      padding: 2px 10px;
    }
  }
}
</style>
